<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>
    <button onclick="alert('别点我')">别点哈！</button>
    <button id="btn">我是按钮</button>
    <h4>注意：八月秋高风怒嚎</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci, autem commodi excepturi incidunt
            pariatur recusandae repudiandae! Animi deleniti dolorum maiores nisi nobis numquam quaerat rem sapiente sit
            veniam! Rem.
        </div>
        <div>Accusantium ad aliquid consectetur cumque debitis delectus dicta dignissimos eligendi eveniet facilis harum
            iure iusto laudantium libero minima minus neque, nisi non numquam odio pariatur quia quibusdam quisquam
            rerum sapiente.
        </div>
        <div>A beatae consequuntur cumque dolorum eos eum exercitationem expedita facere fugiat laborum magnam maxime,
            molestias nam neque nisi odit omnis perspiciatis quaerat quis quos recusandae sunt velit vitae voluptate
            voluptatem.
        </div>
        <div>A, animi aspernatur aut consectetur distinctio ea enim eos excepturi in incidunt nihil nostrum nulla porro
            quam, recusandae repellat sapiente sed soluta tenetur voluptas? Ducimus et nostrum odio provident quaerat!
        </div>
        <div>Ad dolore et iure. Ab aperiam at consectetur consequuntur cum debitis delectus distinctio dolor dolorum est
            hic incidunt mollitia nulla officiis, quae, quas repudiandae saepe, sequi sit suscipit ullam velit.
        </div>
        <div>Dolorem doloribus expedita fugiat magni nesciunt non. Cumque deserunt eligendi excepturi fugiat in
            inventore ipsam ratione reiciendis similique totam? Blanditiis, ex fugit harum itaque laborum minima
            mollitia porro quae totam!
        </div>
        <div>Alias cupiditate dolorum earum, enim iusto laborum quaerat voluptatibus! Accusamus, aliquid, autem dolores
            ducimus est expedita id iste iusto libero magnam maxime, obcaecati perferendis quis quos vel. Laboriosam,
            quas, recusandae?
        </div>
        <div>Aliquam architecto asperiores error maiores obcaecati placeat quis tenetur ullam, voluptate. Ad adipisci
            aliquam animi commodi delectus esse eveniet ex, fugit illum in inventore magnam nihil saepe, sed tenetur
            voluptates!
        </div>
        <div>Aliquam blanditiis ducimus ex explicabo fugiat id maxime nostrum sit tenetur. Aperiam consequatur
            consequuntur cumque cupiditate, ea eaque eveniet facilis illum impedit magnam magni nesciunt, nostrum
            perspiciatis provident saepe vel.
        </div>
        <div>Accusantium asperiores blanditiis commodi dolores est eum illo in labore laudantium magnam magni mollitia
            nemo nihil omnis pariatur perferendis possimus quia quo ratione repellendus saepe, soluta voluptas
            voluptatem voluptates voluptatum.
        </div>
    </div>
<script>
    let buttonE = document.querySelector('#btn');
    buttonE.addEventListener('click',function (){
        alert('别点我啦');
    })
    /* 鼠标移入事件*/
    let h4E=document.addEventListener('mouseover',function (){
        console.log('鼠标移入');
    })

    /* widow 对象浏览器内置的全局对象，代表了当前浏览器窗口 */
    /*window.addEventListener('resize',function (){
        alert('窗口大小被修改了');
    })
    window.addEventListener('scroll',function (){
        alert('窗口滚动了');
    })*/

    /* 关于Js对象的使用 */
    // 1, 直接创建一个对象,在其内部创建属性和方法
    let p1= {
        name:'小明',
        age: 18,
        say:function (){
             console.log('我是'+this.name+',今年'+this.age+'岁');
        }
    };
    console.log(p1.name);
    console.log(p1.age);
    p1.say();

    // 2, 先创建一个空对象,再动态给其添加属性和方法
    let p2={};
    p2.name='小红';
    p2.age=19;
    p2.say=function (){
        console.log('我是'+this.name+',今年'+this.age+'岁');
    }
    console.log(p2.name);
    console.log(p2.age);
    p2.say();

</script>

</body>
</html>